$height:4.1%;
$width:9.5%;
$topHeight:10.7%;
$listTableWidth:100%-$width;
$listTableHeight:85.5%;
$liHeight:3.5vh;
$topBackground-color:#fff;
$listTableMargin-left:1.7%;
$listWidth:100%-$listTableMargin-left*2;
$listHeight:72.6vh;
$listMargin-top:10.6vh;
$listTitleHeight:6.3vh;
$listMenuHeight:5.5vh;
$listMenuNum:11;
$toolMargin-top:4.8vh;
$toolIconWidth:9.5vh;
$toolIconHeight:3.8vh;
$toolIconMargin-top:0vh;
$toolBackground-color:#497ea2;
$toolMargin-right:1.2vh;
$color:#fff;
$toolBorder-radius:0.25vh;
$searchWidth:12.6%;
$searchHeight:1.9vh;
$searchMargin-right:8%;
$menuTitleLiHeight:4.8vh;
$menuTitleLiMargin-top:1vh;
$menuBorder-color:#cfe0eb;
$inputHeight:2.2vh;
$pagePadding:1vh;
$formBoxMargin-left:3vw;
$formBoxWidth:28vw;
$toolBackground-moverColor:#639dc5;
$toolBackground-upColor:#def4b0;
$background-color:rgba(255,255,255,0.05);
html{
  font-size: 10px;
}
.list-man{
  .title{
    height: $liHeight;
    background-color: #d2d2d2;
    width: 100%;
    position: absolute;
    margin-bottom: 0;
    .text{
      position: absolute;
      left: $listTableMargin-left;
      line-height: $liHeight;
      font-size:1.4rem;
      font-weight: bold;
      color: #002f4f;
    }
    .search{
      font-size: 2rem;
        width: 0;
      position: absolute;
      height: $searchHeight*1.6;
      border: none;
      background-color: #b8bfc4;
      right: $searchMargin-right;
      top: 50%;
      margin-top: -$searchHeight*1.6/2;
      border-radius: $searchHeight*0.8;
      outline: none;
      transition: all 100ms;
      -webkit-transition:all 100ms;
      -webkit-appearance:textfield;
      display: none;
      &::-webkit-search-decoration,&::-webkit-search-cancel-button{
        display: none;
      }
    }
    > img{
    position: absolute;
    right: $searchMargin-right;
    width: $searchHeight*1.8;
    height: $searchHeight*1.8;
    margin-top: -1*$searchHeight*1.8/2;
    top: 50%;
    cursor: pointer
  }
    .h-search{
      right:$listTableMargin-left*4;
      width:$searchHeight*0.6 ;
      height: $searchHeight*0.6;
      margin-top: -1*$searchHeight*0.6/2;
      position: absolute;
    }
    .search-text{
      right:$listTableMargin-left;
      float: right;
      position: absolute;
      line-height:$liHeight ;
    }
  }
  .list{

  }
  .list-table{
    float: left;
    position: relative;
    line-height: $listMenuHeight;
    height: $listMenuHeight;
    font-size: 1.4rem;
    color: #002f4f;
    text-align: center;
    padding: 0;
    li{
      float: left;
      position: relative;
      height: 100%;
      font-size: 1.4rem;
      color: #002f4f;
      text-align: center;
      overflow: hidden;
      line-height: $listMenuHeight;
      border-right: 1px solid $menuBorder-color;
      &:nth-child(1){
        width: 5%;
        cursor: pointer;
        .selAll{
          position: absolute;
          top: 50%;
          margin-top: -$inputHeight/2;
          left: 50%;
          width: $inputHeight;
          height: $inputHeight;
          cursor: pointer;
          margin-left: -$inputHeight/2;
        }
      }
      &:last-child{
        border-right: none}
    }
  }
  .list-with-noTool{
    height:$listHeight+$toolMargin-top;
    margin-top:$listMargin-top+-1*$toolMargin-top ;
    .main > {
      li{
        height: ($listMenuHeight*$listMenuNum+$toolMargin-top)/$listMenuNum;
        .list-table{
          height: ($listMenuHeight*$listMenuNum+$toolMargin-top)/$listMenuNum;
        }
      }
    }
    .main{
      height:$listMenuHeight*$listMenuNum+$toolMargin-top ;
    }
    .page{
      margin-top: $listMenuHeight*$listMenuNum+$toolMargin-top ;
      height:$listHeight+(-1)*($listMenuHeight*$listMenuNum+$listTitleHeight) ;
      li{
        a{
          height:$listHeight+(-1)*($listMenuHeight*$listMenuNum+$listTitleHeight) ;
          line-height: $listHeight+(-1)*($listMenuHeight*$listMenuNum+$listTitleHeight);
        }
      }
    }
  }
}
.changeBg{background-color: #555 !important;color: #fff !important;}
.form-box-modal{
  width:100% ;
  height: $listHeight;
  .title{
    background-color: $toolBackground-color !important;
    color: $color;
    height: $liHeight*0.9 !important;
    line-height:$liHeight*0.9;
    text-indent: $liHeight*3/4;
    position: absolute;
  }
  .close-btn{
    right: $listTableMargin-left;
    width: $liHeight*0.36;
    height: $liHeight*0.36;
    margin-top: $liHeight*0.54/2;
  }
  .formBox{
    border: 2px solid $toolBackground-color;
    .prompt-title{background-color: #f39800 !important;}
    .prompt-cancel{display: none}
    .prompt-sure{
      .button{
        width:$toolIconWidth ;
        height:$liHeight ;
        background-color: #f39800 !important;
      }
      &:hover{
        .button{
          background-color:#f9c670 !important;
        }
      }
      &:active{
        .button{
          background-color:#def4b0 !important;
          color:#497ea2 ;

        }
      }
    }
    .main-form{
      margin: 8.6% 0;
      padding: $formBoxMargin-left/3 0;
      width:$formBoxWidth;
      li{
        height:$liHeight ;
        margin-bottom:$liHeight/2 ;
        padding: 0 $liHeight*3/4;
        position: relative;
        span{
          line-height: $liHeight;
          width:$formBoxMargin-left*2;
          text-align: justify;
          display: block;
          position: absolute;
          color: $toolBackground-color;
          float: left;
          &:after{
            content: '';
            width:$formBoxMargin-left*2;
            display: inline-block;
          }
        }
        .colon{
          position: absolute;
          left: $formBoxMargin-left*2*1.25;
        }
        input{
          width:$formBoxWidth+$formBoxMargin-left*2*4/3*-1+$formBoxMargin-left/3*-2;
          border-radius: 3px;
          border: 1px solid #ddd;
          padding-left:$liHeight/4 ;
          height: $liHeight;
          position: absolute;
          left:$formBoxMargin-left*2*4/3;
        }
      }
    }
    .cancel{
      right: $liHeight*3/4+$toolIconWidth+$toolIconWidth/3;
      bottom: $liHeight*0.4;
      line-height: $liHeight;
      height: $liHeight;
      color: $color;
      font-size:1.8rem;
      width: $toolIconWidth;
      text-align: center;
      .button{
        color: $color;
        background-color: $toolBackground-color;
      }
      &:hover{
        .button{
          background-color:$toolBackground-moverColor;
        }
      }
      &:active{
        .button{
          background-color: $toolBackground-upColor;
          color: $toolBackground-color;
        }
      }
    }
    .sure{
      right: $liHeight*3/4;
      bottom: $liHeight*0.4;
      line-height: $liHeight;
      font-size: 1.8rem;
      width: $toolIconWidth;
      text-align: center;
      color: $color;
      .button{
        color: $color;
        background-color: $toolBackground-color;
      }
      &:hover{
        .button{
          background-color:$toolBackground-moverColor;
        }
      }
      &:active{
        .button{
          background-color: $toolBackground-upColor;
          color: $toolBackground-color;
        }
      }
    }
  }
  .prompt{
    border: 2px solid #f39800 !important;
    height: 50%;
  }
}
.confirm-box-modal{
  .confirm-box{
    margin: 8.6% 0;
    padding: $formBoxMargin-left/3 0;
    width:$formBoxWidth;
  }
}

.system{
  dl{
    position: relative;
    margin: 0 0 0.5vh 0;
    height: auto;
    width: 9.5vw;
    dt{
      height:$liHeight ;
      line-height: $liHeight;
      position: relative;
      width: 100%;
      overflow: hidden;
      cursor: pointer;
      p{
        margin: 0;
        position: absolute;
        top: 0;
        text-indent:$liHeight ;
        color: $color;
        opacity: 0.5;
        width: 100%;
      }
      &:hover{
        p{
          opacity: 1;
        }
      }
      .fa-rotate-180{
        position: absolute;
        right: $liHeight/3 ;
        color: $color;
        opacity: 0.5;
        line-height: $liHeight;
      }
      .fa-rotate-90{
        position: absolute;
        color: $color;
        opacity: 0.5;
        line-height: $liHeight;
      }
    }
  }
  >dl{
    >dt{
      background-color: $background-color;
      p{
        text-indent:4.7vh;
      }
      img{
        position: absolute;
        left: $liHeight/3;
        width: 2.2vh;
        height: 2.2vh;
        top: 50%;
        margin-top: -1.1vh;
      }
    }
    .tit3-dt{
      overflow: hidden;
      .tits-name{
        text-indent:$liHeight*4/3 ;
      }
      .tit3-img{
        color: #8fc31f;
        opacity: 1;
      }
    }

  }
}
.change-color{color: #8fc31f !important;opacity: 1 !important;}
.change-backgroundColor{background-color: rgba(255,255,255,0.05)}



